<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>bootStrap</title>
		<!-- <link rel="stylesheet" type="text/css" href="../lib/css/reset.css"/> -->
		<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> -->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> -->
        <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> -->
        <style>
            html,body{
                width: 100%;
                height: 100%;
                position: relative;
				margin: 0;
				padding:0;
            }
            .wraper{
				width: 300px;
				height: 300px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                background-color: cyan;
				text-align: center;
				font-size: 24px;
				font-weight: 600;
				line-height: 300px;
            }
        </style>
	</head>
	<body>
		<!-- <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" style="width: 80rem;height: 32rem;">
		  <div class="carousel-inner" >
		    <div class="carousel-item active">
		        <img src="../lib/images/banner2.jpg" class="d-block w-100" alt="..." style="height: 32rem;">
		    </div>
		    <div class="carousel-item">
		      <img src="../lib/images/banner3.jpg" class="d-block w-100" alt="..." style="height: 32rem;">
		    </div>
		    <div class="carousel-item">
		      <img src="../lib/images/banner4.jpg" class="d-block w-100" alt="..." style="height: 32rem;">
		    </div>
			<div class="carousel-item">
		      <img src="../lib/images/banner6.jpg" class="d-block w-100" alt="..." style="height: 32rem;">
		    </div>
		  </div>
		</div>
		<div class="alert alert-primary" role="alert" style="width: 60%;">
		  A simple primary alert check it out!
		</div>
		<div class="cont" style="display: flex;justify-content: center;align-items: center;">
			<div class="card" style="width: 18rem;">
			  <img src="../lib/images/timg.jpg" class="card-img-top" alt="...">
			  <div class="card-body">
				<h5 class="card-title">Card title</h5>
				<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
				<a href="#" class="btn btn-primary">Go somewhere</a>
			  </div>
			</div>
        </div> -->
        <div class="wraper">测试</div>
	</body>
</html>
